import React, { useRef, useState } from 'react'; // 引入React核心库和useState、useRef钩子
import { Button, Modal } from 'antd'; // 引入Ant Design的Button和Modal组件
import Draggable from 'react-draggable'; // 引入react-draggable库，用于实现拖拽功能
const App = () => {
  const [open, setOpen] = useState(false); // 定义模态框的显示状态
  const [disabled, setDisabled] = useState(true); // 定义拖拽功能的启用状态
  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 }); // 定义拖拽的边界
  const draggleRef = useRef(null); // 创建一个ref用于引用拖拽的DOM元素
  const showModal = () => {
    setOpen(true); // 打开模态框
  };
  const handleOk = e => {
    console.log(e); // 打印确认事件
    setOpen(false); // 关闭模态框
  };
  const handleCancel = e => {
    console.log(e); // 打印取消事件
    setOpen(false); // 关闭模态框
  };
  const onStart = (_event, uiData) => {
    var _a;
    const { clientWidth, clientHeight } = window.document.documentElement; // 获取窗口的宽度和高度
    const targetRect =
      (_a = draggleRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); // 获取拖拽元素的矩形区域
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x, // 计算左边界
      right: clientWidth - (targetRect.right - uiData.x), // 计算右边界
      top: -targetRect.top + uiData.y, // 计算上边界
      bottom: clientHeight - (targetRect.bottom - uiData.y), // 计算下边界
    });
  };
  return (
    <>
      <Button onClick={showModal}>Open Draggable Modal</Button> {/* 点击按钮打开模态框 */}
      <Modal
        title={ // 模态框标题
          <div
            style={{ width: '100%', cursor: 'move' }} // 设置标题样式，使其可拖动
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false); // 鼠标悬停时启用拖拽
              }
            }}
            onMouseOut={() => {
              setDisabled(true); // 鼠标离开时禁用拖拽
            }}
            // fix eslintjsx-a11y/mouse-events-have-key-events
            // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
            // 当组件获得焦点时触发的回调函数
            onFocus={() => {}}
            // 当组件失去焦点时触发的回调函数
            onBlur={() => {}}
          >
            // 组件的内容，这里是一个文本 "Draggable Modal"
            Draggable Modal
          </div>
        }
        // 控制模态框是否打开的属性
        open={open}
        // 点击模态框确认按钮时触发的回调函数
        onOk={handleOk}
        // 点击模态框取消按钮时触发的回调函数
        onCancel={handleCancel}
        // 自定义模态框的渲染方式
        modalRender={modal => (
          // 使用 Draggable 组件包裹模态框内容，使其可拖拽
          <Draggable
            // 控制是否禁用拖拽功能
            disabled={disabled}
            // 设置拖拽的边界
            bounds={bounds}
            // 设置拖拽节点的引用
            nodeRef={draggleRef}
            // 拖拽开始时触发的回调函数，传递事件和拖拽数据
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            // 使用 ref 引用拖拽节点，并渲染模态框内容
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        // 模态框内的内容
        <p>
          // 文本内容
          Just don&apos;t learn physics at school and your life will be full of magic and miracles.
        </p>
        <br />
        <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
      </Modal>
    </>
  );
};
export default App;